<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态提示</title>
	</head>
	<style>
	    .content{
	    	width: 150px;
	    	height: 30px;
	    	line-height:30px;
	    	border:1px solid #8cea00;
	    	background-color:#c2ff68;
	    	text-align:center;
	    	display:inline-block;
	    }
	    .tip{
	    	background-color:#000;
	    	color:#fff;
	    	border-radius:5px;
	    	position:absolute;
	    	padding:8px;
	    	display:none;
	    }

	    .tip i{
	    	content: " ";
		    border-width: 5px;
		    border-color: #000 transparent transparent;
		    border-style: solid;
		    position: absolute;
		    top: 37px;
		    left: 50%;
		    margin-left: -5px;
	    }
/*	    .tip:after{
	    	content: "";
	    	display: block;
	    	border-width:8px;
	    	border-style:solid;
            border-color:transparent transparent #000 transparent;
            position: absolute;
            top:-16px;
            left:50%;
            margin-left:-8px;
	    }
	    .bottom-tip:after{
            border-color: #000 transparent transparent transparent;
            top:35px;

	    }*/
	</style>
<body>
    <div class="content wbc-tip bottom-tip" data-tip="我是一个提示1">下边提示1</div>
    <div class="content">下边提示2</div>
    <div class="content wbc-tip bottom-tip" data-tip="我是一个提示2">下边提示3</div>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <div class="content wbc-tip right-tip">右边提示4</div>
    <div class="content wbc-tip top-tip" data-tip="我是一个提示3">上边提示5</div>
    <div class="content wbc-tip left-tip" data-tip="我是一个提示6">左边提示6</div>

	<div class="tip">
		<span>我是一个tip</span>
		<i></i>
	</div>
	<script src="../biaodan exercise/jquery-1.12.0.js"></script>
	<script>

		!function(window,document,$,undefined){
			    var $tip = $('.tip');
            $('.wbc-tip').on('mouseover',function (){//移入
             	var $this = $(this);
             	var offset = $this.offset();
             	var top = offset.top;
             	var left = offset.left;
             	var height = $this.height();
             	var width = $this.width();
             	var title = $this.attr('data-tip');
             	var tipTop;
             	var tipLeft;
             	var $tipArrow = $tip.find('i');

             	$tip.find('span').html(title || '提示');

				if ($this.hasClass('top-tip')) {
					tipTop = top - height - 12;
					tipArrowObj = {
						"border-color": "#000 transparent transparent",
		    			"top": "37px"
					};
				} else if($this.hasClass('bottom-tip')) { // bottom tip
					tipTop = top + height + 10;
					tipArrowObj = {
						"border-color": "transparent transparent #000",
		    			"top": "-9px"
					} 
				}else if($this.hasClass('left-tip')){
					 left = left - width / 2 - $tip.outerWidth() / 2 - 5;
                     top = top

						tipArrowObj = {
						"border-color": "transparent  transparent  transparent #000 ",
		    			"top": "-10px",
		    			
					}
				} 

			

				$tip
					.css({
						top: tipTop,
						left: left + width / 2 - $tip.outerWidth() / 2,
					})
					.find('i').css(tipArrowObj)//（找到子元素i，给他加上箭头应在的正确的位置）
					.end()//（返回上一次操作之前，返回$tip）
					.show();//（让tip show出来）
				

			}).on('mouseout', function() {//移除
					 $tip.hide();
			});

		}(window, document, jQuery);
	</script>
</body>
</html>